
<template>
  <div class="zffs_box">
    <headercom></headercom>
    <div class="bcg">
      <div class="zffs">
        <ul>
          <li>
            <div class="gdg">
              <p class="gdg_bt">1、公对公线下付款</p>
              <a-radio-group @change="onChange" v-model="gdvalue">
                <a-radio :value="1">开通</a-radio>
                <a-radio :value="2">关闭</a-radio>
              </a-radio-group>
            </div>

            <div class="dgxk">
              <div :class="gdvalue==2?'ccc':''"></div>
              <ul>
                <li>
                  <span>
                    <i>*</i>开户银行名：
                  </span>
                  <a-input class="input" placeholder="开户银行名" />
                </li>
                <li>
                  <span>
                    <i>*</i>银行卡号：
                  </span>
                  <a-input class="input" placeholder="卡号" />
                </li>
                <li>
                  <span>
                    <i>*</i>开户地址：
                  </span>
                  <a-input class="input" placeholder="开户地址" />
                </li>
              </ul>
            </div>
          </li>
          <li>
            <div class="gdg">
              <p class="gdg_bt">2、PC端微信扫码支付</p>
              <a-radio-group @change="onChange" v-model="pcwxvalue">
                <a-radio :value="1">开通</a-radio>
                <a-radio :value="2">关闭</a-radio>
              </a-radio-group>
            </div>
            <div class="dgxk">
              <div :class="pcwxvalue==2?'ccc':''"></div>
              <ul>
                <li>
                  <span>
                    <i>*</i>商户ID：
                  </span>
                  <a-input class="input" placeholder />
                </li>
                <li>
                  <span>
                    <i>*</i>商户密钥：
                  </span>
                  <a-input class="input" placeholder />
                </li>
              </ul>
            </div>
          </li>
          <li>
            <div class="gdg">
              <p class="gdg_bt">3、微信公众号支付</p>
              <a-radio-group @change="onChange" v-model="wxgzhvalue">
                <a-radio :value="1">开通</a-radio>
                <a-radio :value="2">关闭</a-radio>
              </a-radio-group>
            </div>
            <div class="dgxk">
              <div :class="wxgzhvalue==2?'ccc':''"></div>
              <ul>
                <li>
                  <span>
                    <i>*</i>商户ID：
                  </span>
                  <a-input v-model="shID" class="input" placeholder />
                </li>
                <li>
                  <span>
                    <i>*</i>商户密钥：
                  </span>
                  <a-input v-model="shmy" class="input" placeholder />
                </li>
              </ul>
            </div>
          </li>
        </ul>

        <div class="xj_btn">
            <!-- 
            :disabled='this.gdvalue == 2&& this.pcwxvalue== 2 && this.wxgzhvalue == 2'
             -->
          <a-button
            type="primary"
            @click="subbc"
            class="qx_btn"
          >保存</a-button>
          <a-button class="qx_btn">取消</a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import headercom from "../header-comm/header.vue";
export default {
  data() {
    return {
      gdvalue: 2,
      pcwxvalue: 2,
      wxgzhvalue: 2,
      shID: "",
      shmy: "",
    };
  },
  methods: {
    onChange(e) {
      console.log("radio checked", e.target.value);
    },
    subbc() {
      if (this.gdvalue == 1|| this.pcwxvalue== 1 || this.wxgzhvalue == 1) {
        if (this.shID && this.shmy != "") {
          this.$notification["success"]({
            message: "成功",
            description: "开通成功"
          });
        } else {
          this.$notification["error"]({
            message: "失败",
            description: "请将所选支付内容填写完整"
          });
        }
      } else {
           this.$notification["error"]({
            message: "失败",
            description: "请先点击开通一种支付方式"
          });
      }
    }
  },
  components: {
    headercom
  },
  created() {}
};
</script>

<style lang='less'>
th.column-money,
td.column-money {
  text-align: right !important;
}

.zffs_box {
  width: 100%;
  .zffs {
    position: absolute;
    background-color: #fff;
    width: 98%;
    top: 70px;
    left: 1%;
    box-shadow: 0px 0px 7px #ccc;
    ul {
      li {
        .gdg {
          background-color: #f3f7f9;
          padding: 10px;
          .gdg_bt {
            font-size: 16px;
            float: left;
            margin: 0;
            width: 20%;
            text-align: left;
          }
        }
        .dgxk {
          position: relative;
          z-index: 9;
          width: 100%;
          ul {
            padding: 40px 0;
            li {
              display: flex;
              align-items: center;
              margin: 20px 0;
              span {
                width: 120px;
                text-align: right;
                padding-right: 10px;
              }
              i {
                color: #ff0000;
                padding: 0 4px;
              }
            }
            .input {
              width: 30%;
            }
          }
        }
        .ccc {
          position: absolute;
          z-index: 99;
          width: 100%;
          height: 100%;
          background: rgba(255, 255, 255, 0.6);
        }
      }
    }

    .xj_btn {
      padding: 30px;
      .qx_btn {
        width: 90px;
        margin: 0 15px;
      }
    }
  }
}
</style>
